<template>
  <div class="footer">
    <div class="top">
      <div class="left">
        <ul class="links">
          <li class="link" v-for="(link, index) in links" :key="index">{{ link }}</li>
        </ul>
      </div>
      <div class="middle">
        <div class="cooperation">
          <h1 class="title">合作品牌</h1>
          <p class="info">wpbg.marketing@meituan.com</p>
        </div>
        <div class="client">
          <h1 class="title">客服 1010-9777客服</h1>
          <p class="time">周一至周日 9:00~23:00</p>
          <p class="other">客服不受理商务合作</p>
        </div>
      </div>
      <div class="right">
        <div class="title">更多商家，更多优惠</div>
        <div class="code">
          <div class="code-1"></div>
          <div class="code-2"></div>
        </div>
      </div>
    </div>
    <hr class="line" />
    <div class="bottom">
      <div class="qualification-img"></div>
      <router-link to="" class="qualification-text">北京三快在线科技有限公司</router-link>
      <div class="copyright">©️ meituan.com 京ICP证070791号</div>
      <div class="police-img"></div>
      <span class="police">京公网安备11010502025545号</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      links: ['开放平台', '媒体报道', '资质规则', '入驻加盟', '常见问题', '用户反馈', '诚信举报', '加入我们']
    };
  }
};
</script>

<style lang="stylus" rel="stylussheet/stylus">
.footer
  width 100%
  background #222222
  color #FFFFFF
  .top
    width 57.5rem
    margin 0 auto 1.25rem auto
    display flex
    padding-top 4.375rem
    .left
      flex 0 0 25rem
      width 25rem
      font-size 0
      .link
        display inline-block
        width 12.5rem
        font-size 0.875rem
        text-align left
        margin-bottom 1.25rem
        color #E5E5E5
        cursor pointer
    .middle
      flex 1
      .cooperation
        margin-bottom 1.875rem
        .title
          margin-bottom 0.75rem
          font-size 1.375rem
        .info
          font-size 0.875rem
          color #AAAAAA
      .client
        margin-bottom 1.875rem
        .title
          margin-bottom 0.75rem
          font-size 1.375rem
        .time, .other
          font-size 0.875rem
          color #AAAAAA
          margin-bottom 0.5rem
    .right
      flex 1
      padding-left 3.125rem
      .title
        margin-bottom 0.75rem
        font-size 1.375rem
      .code
        font-size 0
        .code-1
          display inline-block
          width 5.625rem
          height 5.625rem
          overflow hidden
          background-image url('https://waimai.meituan.com/static/img/new2018/qrcode-app.png')
          background-size 5.625rem 5.625rem
          background-repeat no-repeat
          margin-right 1.25rem
        .code-2
          display inline-block
          background-image url('https://waimai.meituan.com/static/img/new2018/qrcode-wxapp.png')
          width 5.625rem
          height 5.625rem
          overflow hidden
          background-size 5.625rem 5.625rem
          background-repeat no-repeat
  .line
    margin 0
    padding 0
    border none
    border-bottom 0.0625rem solid rgba(255, 255, 255, 0.3)
  .bottom
    margin 0 auto
    width 57.5rem
    height 4.375rem
    line-height 4.375rem
    font-size 0
    text-align center
    .qualification-img
      display inline-block
      width 1.125rem
      height 4.375rem
      vertical-align top
      background url('http://s3plus.meituan.net/v1/mss_e602b0ee72a245fd9997b7276211d882/waimai-web/goverment_cut.png')
      background-size 1.125rem 1.125rem
      background-repeat no-repeat
      background-position left center
    .qualification-text
      margin-left 0.375rem
      font-size 0.75rem
      color #888
      line-height 4.375rem
      display inline-block
    .copyright
      margin 0 1.25rem
      font-size 0.75rem
      color #888
      line-height 4.375rem
      display inline-block
    .police-img
      display inline-block
      width 1.125rem
      height 4.375rem
      vertical-align top
      background url('https://waimai.meituan.com/static/img/new2018/backup.png')
      background-size 1.125rem 1.125rem
      background-repeat no-repeat
      background-position left center
    .police
      margin-left 0.375rem
      font-size 0.75rem
      color #888
      line-height 4.375rem
      display inline-block
</style>
